<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no, email=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title>Title</title>
    <style type="text/css">
        .hide {
            display: none;
        }

        li {
            list-style: none;
            display: inline-block;
            background-color: #90EE90;
        }

        .tapActiveLi {
            background-color: #FF7F50;
        }

        div {
            border: 1px solid #f00;
        }

        .aTapWrap {
            border: none;
        }
    </style>
</head>
<body>
<div class="aTapWrap aboutA_P" id="aTapWrap">
    <ul id="aTapHeadWrap">
        <li class="tapActiveLi">关于我们</li>
        <li>
            联系方式</li>
        <li>
            意见建议</li>
    </ul>
    <div class="aTapWrapS" id="aTapWrapS">
        <div>
            <p>文字1</p>
        </div>
        <div class="hide">
            <p>文字2</p>
        </div>
        <div class="hide">
            <p>文字3</p>
        </div>
    </div>
</div>
<div class="aTapWrap aboutA_P" id="aTapWrap2">
    <ul id="aTapHeadWrap2">
        <li class="tapActiveLi">关于我们</li><li>
        联系方式</li><li>
        意见建议</li>
    </ul>
    <div class="aTapWrapS" id="aTapWrapS2">
        <div>
            <p>文字1</p>
        </div>
        <div class="hide">
            <p>文字2</p>
        </div>
        <div class="hide">
            <p>文字3</p>
        </div>
    </div>
</div>



<script type="text/javascript">
    window.onload = function(){
        function For(c,d){
            for(var i = 0; i < c.length; i++) {
                c[i].index = i;
                c[i].onclick = function(e) {
                    for(var j = 0; j < c.length; j++) {
                        c[j].className = "";
                        d[j].className = "hide";
                    }
                    this.className = "tapActiveLi";
                    d[this.index].className = "";
                }
            }
        }
        function tab(a,b){
            var aLi = document.getElementById(a).getElementsByTagName('li');
            var aDiv = document.getElementById(b).getElementsByTagName('div');
            For(aLi,aDiv)
        };
        tab('aTapHeadWrap','aTapWrapS');
        tab('aTapHeadWrap2','aTapWrapS2');

    }


    window.onload = function() {
        function For(c, d) {
            function stopPropagation(e) {
                e = e || window.event;
                if(e.stopPropagation) { //W3C阻止冒泡方法
                    e.stopPropagation();
                } else {
                    e.cancelBubble = true; //IE阻止冒泡方法
                }
            };
            for(var i = 0; i < c.length; i++) {
                c[i].index = i;
                c[i].onclick = function(e) {
                    stopPropagation(e)
                    for(var j = 0; j < c.length; j++) {
                        c[j].className = "";
                        d[j].className = "hide";
                    }
                    this.className = "tapActiveLi";
                    d[this.index].className = "";
                }
            }
        }

        function tab(a, b) {
            var aLi = document.getElementById(a).getElementsByTagName('li');
            var aDiv = document.getElementById(b).getElementsByTagName('div');
            For(aLi, aDiv)
        };
        tab('aTapHeadWrap', 'aTapWrapS');
        tab('aTapHeadWrap2', 'aTapWrapS2');
    }
</script>
</body>
</html>